<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
            border: 1px solid gray;
        }
        #app .head{
            background-color: #cfeef0;
        }
        tr:nth-of-type(odd){
            background-color: #efefef;
        }
        td{
            padding: 10px 20px;
            text-align: center;
        }
        #app div{
            padding: 10px ;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <tr class="head">
                <td></td>
                <td>商品名称</td><td>商品单价</td><td>商品数量</td><td>操作</td>
            </tr>
            <tr v-for="(item,index) in arr">
                <td>{{index+1}}</td>
                <td>{{item.pname}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="jian(item)">-</button>
                    {{item.num}}
                    <button @click="jia(item)">+</button>
                </td>
                <td><button @click="del(index)">移除</button></td>
            </tr>
        </table>
        <div>
            总价: ¥{{total()}}
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            arr:[
                {pname:"iPhone X",price:7999,num:1},
                {pname:"荣耀 10",price:2399,num:1},
                {pname:"华为 P20",price:3399,num:1},
                {pname:"小米 8",price:3999,num:1},
            ]
        },
        methods:{
            jian(item){
                if(item.num==0) return
                item.num--
            },
            jia(item){
                item.num++
            },
            del(index){
                this.arr.splice(index,1)
            },
            total(){
                let num = 0
                this.arr.forEach(v=>{
                    num += v.price * v.num
                })
                return num
            }
        }
    })
</script>
</html>